<div id="shouye">
  <div class="list-btn">
    <el-row :gutter="20">
      <h1>快捷入口</h1>
      <el-col :span="4">
        <router-link to='/queryDisplay/chartDisplay'>
          <el-button type="primary">项目查看</el-button>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link to='/planManage/jibenxinxi'>
          <el-button type="primary">项目录入</el-button>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link to='/planManage/template'>
          <el-button type="primary">项目模板管理</el-button>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link to='/planManage/changePlan'>
          <el-button type="primary">计划变更</el-button>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link to='/update/overdue'>
          <el-button type="primary">问题上报</el-button>
        </router-link>
      </el-col>
    </el-row>
  </div>
  <div class="chart">
    <el-col :span="10">
      <h1>通知</h1>

      <el-badge :value="2" class="item">
        <el-button size="small" @click="mode='消息提醒'">消息提醒</el-button>
      </el-badge>
      <el-badge :value="1" class="item" style="margin-left: 20px">
        <el-button size="small" @click="mode='待办事项'">待办事项</el-button>
      </el-badge>

      <el-collapse class="notice" v-model="activeNames" accordion>

        <template v-if="mode=='消息提醒'">
          <el-collapse-item name="1">
            <template slot="title">
              <div class="tit warning">
                <i class="header-icon el-icon-warning"></i>项目进度更新提醒
                <span class="date">2020-03-13</span>
                <span style="color: red;">未读</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已于2020年3月10日完成，请关注！</p>
            </div>
            <div class="button">
              <el-button type="primary">查看详情</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div class="tit warning">
                <i class="header-icon el-icon-warning"></i>预警提醒
                <span class="date">2020-03-13</span>
                <span style="color: red;">未读</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务计划于2020年3月15日完成，距离计划完成时间还剩两天，请关注！</p>
            </div>
            <div class="button">
              <el-button type="primary">查看详情</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div class="tit warning">
                <i class="header-icon el-icon-warning"></i>逾期提醒
                <span class="date">2020-03-12</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务计划于2020年3月10日完成，已逾期两天，请关注！</p>
            </div>
            <div class="button">
              <el-button type="primary">查看详情</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              <div class="tit info">
                <i class="header-icon el-icon-info"></i>计划变更提醒
                <span class="date">2020-03-12</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已变更，请关注！</p>
            </div>
            <div class="button">
              <el-button type="primary">查看详情</el-button>
            </div>
          </el-collapse-item>
        </template>

        <template v-if="mode=='待办事项'">
          <el-collapse-item name="5">
            <template slot="title">
              <div class="tit info">
                <i class="header-icon el-icon-info"></i>计划变更-待审批
                <span class="date">2020-03-11</span>
                <span style="color: red;">未读</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已申请变更，请审批！</p>
            </div>
            <div class="button">
              <el-button type="primary">去处理</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item name="6">
            <template slot="title">
              <div class="tit info">
                <i class="header-icon el-icon-info"></i>问题上报-待审批
                <span class="date">2020-03-11</span>
              </div>
            </template>
            <div class="content">
              <p>xxx项目xxx任务已审批同意，请处理！</p>
            </div>
            <div class="button">
              <el-button type="primary">去处理</el-button>
            </div>
          </el-collapse-item>
        </template>

      </el-collapse>

    </el-col>
    <el-col :span="14">
      <h1>项目统计</h1>
      <el-col :span="12">
        <div id="echartsFour" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
      <el-col :span="12">
        <div id="echartsThree" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-col>

  </div>
</div>

